import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'

import {
  NavBar, Form, Field, Button, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell,
  CellGroup, List, PullRefresh, ActionSheet, Popup, Col, Badge, row, Search
  , Image as VanImage, Divider, Tag, Dialog, DatetimePicker
} from 'vant'

// cll单元格
Vue.use(Cell)
Vue.use(CellGroup)
// 图标
Vue.use(Icon)
// Nav Bar 导航栏
Vue.use(NavBar)
// 登录页面表单组件
Vue.use(Form)
Vue.use(Field)
// button组件
Vue.use(Button)
// 底部导航
Vue.use(Tabbar)
Vue.use(TabbarItem)
// Tab标签栏
Vue.use(Tab)
Vue.use(Tabs)
// list组件  触底更新
Vue.use(List)
// 下拉刷新组件
Vue.use(PullRefresh)
// 反馈组件  动作面板
Vue.use(ActionSheet)
// 点击加号 popop弹出层组件
Vue.use(Popup)
// 弹出层内容里用到组件三个 Col, Badge, row
Vue.use(Col)
Vue.use(Badge)
Vue.use(row)
Vue.use(Search)
// 图片
Vue.use(VanImage)
// 我的  页面使用组件
Vue.use(Tag)
// Dialog 弹出框 在修改编辑姓名时使用过
Vue.use(Dialog)
// 时间选择
Vue.use(DatetimePicker)
Vue.config.productionTip = false

// 封装中间件函数插件
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      // el代表指令所在标签
      // 指令所在标签，被插入到真实DOM时才触发，如果标签用display:none隐藏在出现，不会被触发
      inserted (el) {
        // 指令所在van-search组件
        // 组件根标签是div，input在内部
        // 以上都是原生标签对象
        // 搜索页面el是div
        // 文章评论 el是textarea
        // 以后el还可能是input呢
        // 知识点：原生DOM.nadeName 拿到标签名字（注意：大写的字符串）
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本身不是输入框，尝试往里获取一下
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          // 判断：不一定能获取得到，需要加判断，有值了，在执行.focus()才不报错
          if (theInput) theInput.focus()
          if (theTextArea) theTextArea.focus()
        }
      },
      update (el) {
        // 指令所在标签，被更新时触发update更新后
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本身不是输入框，尝试往里获取一下
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          // 判断：不一定能获取得到，需要加判断，有值了，在执行.focus()才不报错
          if (theInput) theInput.focus()
          if (theTextArea) theTextArea.focus()
        }
      }
    })
  }
}
// vue.use 执行目标对象里install方法并传入Vue类
Vue.use(directiveObj)
// 详情页组件
Vue.use(Divider)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
